<template>
  <div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div class="label">转运标题：</div>
            <a-input :maxLength="128" v-model="searchData.transferTitle" />
          </a-col>
          <a-col :span="6">
            <div class="label">入库仓库：</div>
            <a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.warehousingId"
              allowClear
              placeholder="全部"
            >
              <a-select-option
                :value="item.warehouseId"
                v-for="item in warehouse"
                :key="item.warehouseId"
              >
                {{ item.titleName }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div class="label">转运入库编号：</div>
            <a-input :maxLength="128" v-model="searchData.transferNo" />
          </a-col>
          <a-col :span="6" v-show="!expand">
            <span style="margin-left: 20px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
          <a-col :span="6" v-show="expand">
            <div class="label">创建时间：</div>
            <a-range-picker
              style="width: 60%"
              :placeholder="['年/月/日', '年/月/日']"
              format="YYYY-MM-DD"
              :value="Datevalue"
              v-model="dateTime"
              @change="DateChange"
            />
          </a-col>
        </a-row>
        <a-row :gutter="24" v-show="expand">
          <a-col :span="6">
            <div class="label">货物编号：</div>
            <a-input :maxLength="128" v-model="searchData.goodsBoxNo" />
          </a-col>
          <a-col :span="6">
            <div class="label">客户编号：</div>
            <a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.tenantId"
            >
              <a-select-option
                :value="item.tenantId"
                v-for="item in accArray"
                :key="item.id"
                :titles="item.title"
              >
                {{ item.companyName + "/" + item.tenantId }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" v-show="expand">
            <span style="margin-left: 10px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
            <a
              :style="{
                marginRight: '8px',
                fontSize: '14px',
                marginLeft: '10px',
              }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="action" style="margin-top: 10px"></div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="2" @change="callback">
        <a-tab-pane key="2" force-render>
          <span slot="tab">
            <a-badge :count="statecount.toAudit" :offset="[15, 0]"
              >待审核
            </a-badge>
          </span>
          <TransferInCheckTable
            v-if="TransferOutKeys == '2'"
            :tableData="tableData"
            TransferOutKeys="待审核"
            :getTransferInTableList="getTransferInTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
        <a-tab-pane key="3">
          <span slot="tab">
            <a-badge :count="statecount.Undertakes" :offset="[15, 0]"
              >待发头程
            </a-badge>
          </span>
          <TransferInCheckTable
            v-if="TransferOutKeys == '3'"
            :tableData="tableData"
            TransferOutKeys="待发头程"
            :getTransferInTableList="getTransferInTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
            :isState="3"
          />
        </a-tab-pane>
        <a-tab-pane key="4">
          <span slot="tab">
            <a-badge :count="statecount.onTheWay" :offset="[15, 0]"
              >在途中
            </a-badge>
          </span>
          <TransferInCheckTable
            v-if="TransferOutKeys == '4'"
            :tableData="tableData"
            TransferOutKeys="在途中"
            :getTransferInTableList="getTransferInTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
        <a-tab-pane key="5">
          <span slot="tab">
            <a-badge :count="statecount.haveReceived" :offset="[15, 0]"
              >已接收
            </a-badge>
          </span>
          <TransferInCheckTable
            v-if="TransferOutKeys == '5'"
            :tableData="tableData"
            TransferOutKeys="已接收"
            :getTransferInTableList="getTransferInTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
        <a-tab-pane key="6">
          <span slot="tab">
            <a-badge :count="statecount.HasBeen" :offset="[15, 0]"
              >已入库
            </a-badge>
          </span>
          <TransferInCheckTable
            v-if="TransferOutKeys == '6'"
            :tableData="tableData"
            TransferOutKeys="已入库"
            :getTransferInTableList="getTransferInTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
        <a-tab-pane key="0">
          <span slot="tab">
            <a-badge :count="statecount.processingCount" :offset="[15, 0]"
              >审核不通过
            </a-badge>
          </span>
          <TransferInCheckTable
            v-if="TransferOutKeys == '0'"
            :tableData="tableData"
            TransferOutKeys="审核不通过"
            :getTransferInTableList="getTransferInTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider :locale="locale">
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- 新增模态框 -->
    <TransferInCheckModal
      :getTransferInTableList="getTransferInTableList"
      :getStateCount="getStateCount"
      :transferOutKeys="TransferOutKeys"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  TransferIn_tabList,
  TransferIn_statecount,
} from "@/apis/clientSide/OrderManage/TransferIn";
import TransferInCheckTable from "@/components/system/auditCenter/TransferIsCheck/TransferInCheckTable.vue";
import TransferInCheckModal from "@/components/system/auditCenter/TransferIsCheck/TransferInCheckModal.vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
export default {
  components: {
    TransferInCheckTable,
    TransferInCheckModal,
  },

  data() {
    return {
      spinning: false,
      //折叠效果
      expand: false,
      dateTime: [],
      Datevalue: [],
      url: "",
      //物流商标杆
      logisticsFlag: false,
      //复选框的值
      selectedKeys: [],
      selectedRows: [],
      // 表头状态气泡数量
      statecount: {
        toAudit: "0",
        Undertakes: "0",
        onTheWay: "0",
        haveReceived: "0",
        HasBeen: "0",
        processingCount: "0",
      },
      tableData: [],
      TransferOutKeys: "2",
      locale,
      total: 5,
      searchData: {
        referenceID: null,
        fbaId: null,
        warehousingId: null,
        transferNo: null,
        startTime: null,
        endTime: null,
        auditState: "2",
        transferTitle: null,
        size: 10,
        tenantId: null,
        goodsBoxNo: null,
        current: 1,
      },
    };
  },
  mounted() {
    this.getTransferInTableList();
    this.getStateCount(0); //审核不通过
    this.getStateCount(2); //待审核的气泡数
    this.getStateCount(3); //待发头程的气泡数
    this.getStateCount(4); //在途中的气泡数
    this.getStateCount(5); //已接受的气泡数
    this.getStateCount(6); //已入库气泡数
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return (
        current && current < moment(this.searchData.startTime).endOf("day")
      );
    },

    //查询接口
    searchBtn() {
      this.getTransferInTableList();
    },
    // 接收子传过来的复选框
    selectedRowKeys(val, selectedRows) {
      this.selectedKeys = val;
      this.selectedRows = selectedRows;
    },
    //选项卡更改
    callback(key) {
      this.searchData.current = 1;
      this.TransferOutKeys = key;
      this.searchData.auditState = key;
      this.getTransferInTableList();
      this.updateView();
    },
    updateView() {
      this.spinning = true;
      setTimeout(() => {
        this.spinning = false;
      }, 1000);
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTransferInTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTransferInTableList();
    },

    //重置按钮
    resetBtn() {
      this.searchData.warehousingId = null;
      this.searchData.transferNo = null;
      this.searchData.startTime = null;
      this.searchData.endTime = null;
      this.searchData.tenantId = null;
      this.searchData.transferTitle = null;
      this.searchData.goodsBoxNo = null;
      this.dateTime = [];
      this.getTransferInTableList();
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      if (dateString && dateString.length > 0) {
        this.searchData.startTime = `${dateString[0]} 00:00:00`; //年月日后面必须要有个空格
        this.searchData.endTime = `${dateString[1]} 23:59:59`; //年月日后面必须要有个空格
      } else {
        this.searchData.startTime = "";
        this.searchData.endTime = "";
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    // 显示批量导入模态框
    showImportModal() {
      setTimeout(() => {
        this.$bus.$emit("showTransferInImportModal", this.selectedRows);
      }, 50);
    },
    // 获取表格数据
    async getTransferInTableList() {
      this.spinning = true;
      let { code, responseBody } = await TransferIn_tabList(
        this.searchData.auditState,
        this.searchData
      );
      if (code === "200") {
        this.total = responseBody.total * 1;
        let { records } = responseBody;
        this.tableData = JSON.stringify(records);
        this.tableData = JSON.parse(this.tableData);
        this.spinning = false;
        this.tableData.forEach((item) => {
          item.updateTime = item.updateTime
            ? item.updateTime.replace("T", "  ")
            : "";
          item.createTime = item.createTime
            ? item.createTime.replace("T", "  ")
            : "";
          if (item.auditState === "6") {
            item.auditState = "已入库";
          } else if (item.auditState == "2") {
            item.auditState = "待审核";
          } else if (item.auditState == "3") {
            item.auditState = "待发头程";
          } else if (item.auditState == "4") {
            item.auditState = "在途中";
          } else if (item.auditState == "5") {
            item.auditState = "已接收";
          } else if (item.auditState == "0") {
            item.auditState = "审核不通过";
          }
          if (item.businessType == "0") {
            item.businessType = "FBA转入";
          } else if (item.businessType == "1") {
            item.businessType = "普通转入";
          } else if (item.businessType == "2") {
            item.businessType = "其他仓转入";
          }
        });
      }
    },
    //获取表头统计
    async getStateCount(data) {
      let res = await TransferIn_statecount("-1", data);
      if (data == 2) {
        this.statecount.toAudit = res.responseBody;
      } else if (data == 3) {
        this.statecount.Undertakes = res.responseBody;
      } else if (data == 4) {
        this.statecount.onTheWay = res.responseBody;
      } else if (data == 5) {
        this.statecount.haveReceived = res.responseBody;
      } else if (data == 6) {
        this.statecount.HasBeen = res.responseBody;
      } else if (data == 0) {
        this.statecount.processingCount = res.responseBody;
      }
    },
  },
  computed: {
    ...mapState(["warehouse"]),

    ...mapState(["accArray"]),
  },
};
</script>

<style lang="less" scoped>
.action {
  span {
    margin: 0 5px 0 0;
  }
}
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
  .ant-col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
  }
}
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}

/deep/.blueBtn {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
.blueBtn:focus,
.blueBtn:hover {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
